<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="box">
    <p>
        没有防抖的：<input type="text" class="ipt1">
    </p>
    <p>
        添加防抖的：<input type="text" class="ipt2">
    </p>
</div>

<script>

let ipt1 = document.querySelector('.ipt1')
ipt1.onkeyup = function (){
    // jsonp函数会频繁被触发
    jsonp()// 发送jsonp请求
}
function jsonp(){
    if (!ipt1.value) {
        return
    }
    // 发送jsonp请求
    let Script = document.createElement('script')
    Script.src = 'https://suggestion.baidu.com/su?cb=render&wd='+ipt1.value
    document.body.appendChild(Script)
    Script.onload = function (){
        this.remove()
    }
}
function render(res){
    console.log( '请求成功',res )
}

// 防抖
// 防抖是为了避免在短时间重复触发多次处理函数，造成延迟、卡顿、假死等现象发生
// 短时间内重复触发时，只有最后一次执行（延迟执行某个函数）
let ipt2 = document.querySelector('.ipt2')

// let timer
// ipt2.onkeyup = function (){
//     // 防抖处理（降低jsonp的执行频率）
//     clearTimeout(timer)
//     timer = setTimeout(function (){
//         jsonp()
//     },300)
// }

// 函数防抖
function debounce(fn,time){
    let timer
    return function (){// debounceJsonp
        clearTimeout(timer)
        timer = setTimeout(function (){
            fn()// 对fn进行防抖处理
        },time)
    }
}
let debounceJsonp = debounce(jsonp,300)// 防抖处理

ipt2.onkeyup = function (){
    debounceJsonp()// 执行防抖处理后的函数
}

</script>
</body>
</html>